<template>
    <view class="searchPage">
		<view class="shareBox">
			<image class="pageBg" src="/static/image/wallet/shareBg.png"></image>
			<image class="lineImg" src="/static/image/wallet/shareLine.png"></image>
			<view class="shareInfo">
				<view class="qTitle">邀请码</view>
				<view class="qNum nodetex">{{code}}</view>
				<view class="flex align-center" style="width: 100%;">
					<image style="width: 70upx;height: 70upx;margin-left: 20upx;" :src="avatar"></image>
					<view class="nodetext" style="margin-left: 20upx;max-width: 300rpx;font-size: 28rpx;">{{nickname}}</view>
				</view>
				<!-- <text class="qTips">邀请您加入</text> -->
				<view class="centerLine"></view>
				<view class="qBox">
					<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground"
					  :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
					  @result="qrR" />
				</view>
				<view class="saoText">请截屏分享</view>
			</view>
		</view>
		<!-- <view class="postBtn" @click="sharewx" v-if="haibaopath">保存到相册</view> -->
    </view>
</template>
 
<script>
	import {
		mapGetters
	} from 'vuex';
	import tkiQrcode from "components/page-component/tki-qrcode/tki-qrcode.vue"
	import {
		post
	} from "@/utils/post.js";
    export default {
		components: {
			tkiQrcode 
		},
        data() {
            return {
			   val:'', // 要生成的二维码值
			   size: 300, // 二维码大小
			   unit: 'upx', // 单位
			   background: '#fff', // 背景色
			   foreground: '#000', // 前景色
			   pdground: '#000', // 角标色
			   icon: '', // 二维码图标
			   iconsize: 40, // 二维码图标大小
			   lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			   onval: true, // val值变化时自动重新生成二维码
			   loadMake: true, // 组件加载完成后自动生成二维码
			   src: '', // 二维码生成后的图片地址或base64
			   haibaopath:'',
			   code:'',
			   avatar:'',
			   nickname:''
            }
        },
		// computed: {
		// 	...mapGetters({
		// 	    userInfo: 'user/info'
		// 	}),
		// },
		onLoad(op){
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight-0
					that.windowWidth = res.windowWidth-0
					that.statusBarHeight = res.statusBarHeight-0
				}
			})
			post(this.$api.wx.get_invite_code,{},false,res=>{
				if(!res.data.invite_code){
					this.$showM('暂无邀请资格',false,res=>{
						uni.navigateBack()
					})
					return
				}
				var mch_id = uni.getStorageSync('s_mch_id') || '0'
				this.val = this.$siteInfo.main + 'pages/index/index?invite_id='+ res.data.invite_code+'&mch_id='+mch_id
				this.code = res.data.invite_code
				this.avatar = res.data.avatar
				this.nickname = res.data.nickname
				console.log(this.val)
			})
		},
		onShow(){
			console.log(this.val)
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'/pages/share/team/team'
			})
		},
        methods: {
			qrR(res) {
				uni.hideLoading()
				 return
				if (this.$Config.debug) {
					uni.hideLoading()
				    return
				}
				setTimeout(()=>{
					var that = this
					let view = uni.createSelectorQuery().in(this).select(".shareBox");
					view.fields({
						size: true,
						scrollOffset: true,
						rect:true
					}, data => {
						that.haobaoHeight = data.height
						that.toleft = (that.windowWidth - data.width) / 2
						that.submit()
					}).exec();
				},100)
			},
			submit() {
				const that = this;
				uni.hideLoading()
				this.$nextTick(() => {
					var pages = getCurrentPages();
					var page = pages[pages.length - 1];
					var ws = page.$getAppWebview();
					that.bitmap = new plus.nativeObj.Bitmap('amway_img');
					ws.draw(that.bitmap, function() {
						that.ifsrc = true
						var ranname = new Date().getTime() + Math.floor(Math.random() * 150)
						that.bitmap.save("_doc/"+ranname+".jpg", {}, function(i) {
							uni.hideLoading()
							that.haibaopath = i.target
						}, function(e) {
							console.log('保存图片失败：' + JSON.stringify(e));
							uni.hideLoading()
						});
					}, function(e) {
						console.log('截屏绘制图片失败：' + JSON.stringify(e));
						uni.hideLoading()
					}, {
						clip: {
							top: uni.upx2px(80)+46+that.statusBarHeight+'px',
							left: that.toleft+'px',
							height: uni.upx2px(1120) +'px',
							width: uni.upx2px(676) +'px'
						}
					});
				});
			},
			sharewx(){
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.haibaopath,
					success: function () {
						uni.showToast({
						    title: '保存成功',
						    duration: 1500
						});
					}
				});
				return
				// uni.previewImage({
				// 	urls:[this.haibaopath]
				// })
				// return
				
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 2,
					imageUrl: this.haibaopath,
					success:(res)=>{
						this.hidehaibao()
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
        }
    }
</script>

<style scoped lang="less">
	.postBtn{
		width: 600upx;
		line-height: 80upx;
		background: #3c394a;
		color: #fff;
		text-align: center;
		font-size: 30upx;
		border-radius: 10upx;
		margin-top: 150upx;
		margin-left: 75upx;
	}
	.saoText{
		font-size: 24upx;
		color: #999;
		margin-top: 10upx;
	}
	.centerLine{
		border-bottom: 1px dashed #000;
		width: 100%;
		margin: 10upx 0 15upx 0;
	}
	.qTips{
		font-size: 24upx;
	}
	.qNum{
		font-size: 36upx;
		color:#ef436e;
		width: 90%;
		text-align: center;
	}
	.qTitle{
		font-size: 28upx;
		font-weight: bold;
		margin-top: 10upx;
	}
	.qBox{
		padding: 10upx;
		border-radius: 10upx;
		background:#fff;
	}
	.shareInfo{
		position: absolute;
		top:280upx;
		width: 414upx;
		left: 93upx;
		height: 580upx;
		background: #fff;
		border-radius: 0 0 10upx 10upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
	}
	.shareBox{
		width: 600upx;
		height: 900upx;
		position: relative;
		top:80upx;
		left: 75upx;
	}
	.pageBg{
		width: 100%;
		height: 100%;
		display: block;
	}
	.lineImg{
		position: absolute;
		top:260upx;
		width: 460upx;
		left: 70upx;
		height: 40upx;
	}
	.searchPage{
		padding-top: 1upx;
	}
</style>
